<template>
  <view class="xuexi_index">
    <NavBar
      title="教育学习"
      @rightTextClick="clickRightFn"
      rightIcon="plus"
      right-text="收藏"
      icon-color="#ccc"
    />
    <div class="index_cont">
      <view class="top">
        <!-- 搜索 1 -->
        <view class="search" @click="searchBtn">
          <i class="iconfont icon-sousuo" style="font-size: 34rpx"></i>
          <text>搜索</text>
        </view>
        <!-- 搜索 2 -->
        <!-- 学习资料 1 -->
        <view class="xuexi_means">
          <view class="_title">学习资料</view>
          <view class="ziliao_cont display_center">
            <view class="upload_down display_wrap">
              <view
                v-for="(item, index) in uploadArr"
                :key="index"
                class="display_center"
                :style="
                  'border: 1px dashed ' +
                  item.color +
                  ';background:' +
                  item.bgColor
                "
                @click="clickUploadArr(item)"
              >
                <image
                  :src="item.img"
                  style="width: 60rpx; height: 60rpx"
                ></image>
                <text style="font-size: 32rpx">{{ item.title }}</text>
              </view>
            </view>
          </view>
          <view class="xuexi_type display_space_between">
            <view
              class="_item"
              v-for="(item, index) in typeArr"
              :key="index"
              @click="clickTypeArr(item)"
            >
              <image
                :src="item.img"
                style="width: 120rpx; height: 120rpx"
              ></image>
              <view class="item_num">
                <uni-badge :text="item.num" />
              </view>
              <view>{{ item.title }}</view>
            </view>
          </view>
        </view>
        <!-- 学习资料 2 -->
      </view>

      <view class="bottom">
        <!-- 学习心得 1 -->
        <view class="xuexi_means">
          <view class="_title">学习心得</view>
        </view>
        <!-- 学习心得 2 -->
        <view class="in display_wrap">
          <view
            v-for="(i, index) in xindeArr"
            :key="index"
            class="display_space_between"
            @click="uploadXinde(i)"
          >
            <view class="left display_space_between">
              <image :src="i.img" style="width: 100rpx; height: 100rpx"></image>
              <text>
                <text class="name">{{ i.name }}</text>
                <text class="line">|</text>
                <text class="status" :style="'color:' + i.color">{{
                  i.status
                }}</text>
              </text>
            </view>
            <view class="right">
              <image
                src="../../static/dangjian/xuexi/09in.png"
                style="width: 40rpx; height: 40rpx"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </div>
  </view>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import {
  apiEducTypeNum,
  apiCommonIsRead,
} from "../../net/educationalLearning.js";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      // 上传资料/下载记录
      uploadArr: [
        // {
        //   inedx: 0,
        //   title: "上传资料",
        //   color: "#51BB88",
        //   bgColor: "#F8FFFD",
        //   img: "../../static/dangjian/xuexi/01Upload.png",
        // },
        {
          inedx: 1,
          title: "下载记录",
          color: "#3B95FF",
          bgColor: "#F4F8FF",
          img: "../../static/dangjian/xuexi/02down.png",
        },
      ],
      // 分类
      typeArr: [
        {
          index: 0,
          title: "视频学习",
          img: "../../static/dangjian/xuexi/03video.png",
          num: 0,
        },
        {
          index: 1,
          title: "文档资料",
          img: "../../static/dangjian/xuexi/04word.png",
          num: 0,
        },
        {
          index: 2,
          title: "电子图书",
          img: "../../static/dangjian/xuexi/05book.png",
          num: 0,
        },
        {
          index: 3,
          title: "专题学习",
          img: "../../static/dangjian/xuexi/06zhuanti.png",
          num: 0,
        },
      ],
      xindeArr: [
        // {
        //   index: 1,
        //   img: "../../static/dangjian/xuexi/08.png",
        //   name: "学习心得",
        //   status: "党员",
        //   color: "#51BB88"
        // },
        {
          index: 0,
          img: "../../static/dangjian/xuexi/07.png",
          name: "学习心得",
          status: "个人",
          color: "#E86565",
        },
      ],
    };
  },
  onShow() {
    this.getEducTypeNum();
  },
  onLoad() {
    let permission = JSON.parse(uni.getStorageSync("loginUserInfo")).permission;
    if (
      permission.indexOf("admin") > -1 ||
      permission.indexOf("superAdmin") > -1
    ) {
      this.uploadArr.unshift({
        inedx: 0,
        title: "上传资料",
        color: "#51BB88",
        bgColor: "#F8FFFD",
        img: "../../static/dangjian/xuexi/01Upload.png",
      });
      this.xindeArr.unshift({
        index: 1,
        img: "../../static/dangjian/xuexi/08.png",
        name: "学习心得",
        status: "党员",
        color: "#51BB88",
      });
    }
  },
  onPullDownRefresh() {
    this.getEducTypeNum();
  },
  methods: {
    // type类型 userId登录人id
    async getCommonIsRead(djStudyId) {
      let data = {
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
        djDeptId: JSON.parse(uni.getStorageSync("loginUserInfo")).djDeptId,
        djStudyId,
      };
      let res = await apiCommonIsRead(data);
      if (res.code == 0) {
        let sum = 0;
        for (let i = 0; i < res.data.length; i++) {
          if (
            res.data[i].status == 0 &&
            res.data[i].learning_type == djStudyId
          ) {
            sum++;
          }
        }
        uni.stopPullDownRefresh();
        return sum;
      }
    },
    getEducTypeNum() {
      // 判断是不是单党员，只有党员才显示提示
      let permission = JSON.parse(
        uni.getStorageSync("loginUserInfo")
      ).permission;
      if (permission[permission.length - 1] != "common") {
        return;
      } else {
        this.getCommonIsRead(1).then((res) => {
          this.typeArr[0].num = res;
        });
        this.getCommonIsRead(2).then((res) => {
          this.typeArr[1].num = res;
        });
        this.getCommonIsRead(3).then((res) => {
          this.typeArr[2].num = res;
        });
        this.getCommonIsRead(4).then((res) => {
          this.typeArr[3].num = res;
        });
        // let djDeptId = JSON.parse(uni.getStorageSync('loginUserInfo')).djDeptId;
        // let userId = JSON.parse(uni.getStorageSync('loginUserInfo')).uid
        // apiEducTypeNum(djDeptId,userId)
        //   .then((res) => {
        //     uni.stopPullDownRefresh();
        //     if (res.code == 0) {
        //       for (let i = 0; i < res.data.length; i++) {
        //         this.typeArr[i].num = res.data[i].count;
        //       }
        //     }
        //   })
        //   .catch((err) => {
        //     console.log(err);
        //     uni.stopPullDownRefresh();
        //   });
      }
    },
    // 上传学习心得
    uploadXinde(item) {
      let data = {
        index: 2,
        title: "学习心得",
      };
      if (!item.index) {
        data.isAdmin = true;
      }
      uni.navigateTo({
        url: `../DJActivityDaylist/index?data=${JSON.stringify(data)}`,
      });
    },

    // 点击类别
    clickTypeArr(item) {
      let data = {
        title: item.title,
        index: item.index,
      };
      uni.navigateTo({
        url: `./videoStudyList?data=${JSON.stringify(data)}`,
      });
    },

    // 点击按钮
    clickUploadArr(item) {
      let url = "";
      if (item.title == "下载记录") {
        url = "./downPage";
      } else {
        url = "./Upload";
      }
      uni.navigateTo({
        url,
      });
    },

    // 跳转搜索页面
    searchBtn() {
      uni.navigateTo({
        url: "./Search",
      });
    },

    clickRightFn() {
      uni.navigateTo({
        url: "./collectionList",
      });
    },
  },
};
</script>

<style>
page {
  width: 100%;
  height: 100vh;
  background: #fff;
  overflow: hidden;
}

.display_space_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.display_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.display_wrap {
  display: flex;
  flex-wrap: wrap;
}

._title {
  margin: 40rpx 0;
  height: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
  line-height: 38rpx;
}

/* /////////////////// */

.index_cont {
  display: flex;
  flex-wrap: wrap;
	margin-top: 40rpx;
}

.top,
.bottom {
  width: 100%;
  height: 50% !important;
  padding: 0 24rpx;
  /* background: #fff; */
}

/* 搜索 1 */
.search {
  width: 702rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #edeef0;
  border-radius: 8rpx;
  font-size: 30rpx;
  color: #999999;
  padding-left: 24rpx;
  box-sizing: border-box;
}

.search i {
  margin-right: 20rpx;
}

/* 搜索 2 */

/* 学习资料 1 */
.xuexi_means {
  position: relative;
}

.xuexi_means .ziliao_cont {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 662rpx;
}

.upload_down view {
  width: 662rpx;
  /* height: 100rpx; */
  padding: 14rpx 0;
  border-radius: 8rpx;
  margin: 10rpx 0;
}

.upload_down view image {
  margin-right: 20rpx;
}

.xuexi_type {
  font-size: 24rpx;
  font-weight: 500;
  color: #333333;
  padding: 0 20rpx;
}

.xuexi_type ._item {
  position: relative;
}

.item_num {
  position: absolute;
  top: 0;
  right: -20rpx;
}

.xuexi_type view {
  text-align: center;
}

.xuexi_type image {
  /* padding-top: 20rpx; */
  box-sizing: border-box;
  margin: 14rpx 0;
}

/* 学习资料 2 */

.bottom {
  /* height: 45%; */
  margin-top: 20rpx;
  padding: 0 24rpx;
  background: #fff;
  position: relative;
}

.bottom .in {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.bottom .in > view {
  padding: 10rpx;
  box-sizing: border-box;
  width: 662rpx;
  height: 120rpx;
  background: #f9f9f9;
  border-radius: 8rpx;
  border: 1px solid #d6dbe3;
  margin: 10rpx 0;
}

.bottom .in .left .name {
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
  margin-left: 34rpx;
}

.bottom .in .left .line {
  margin: 0 20rpx;
}

.status {
  font-size: 30rpx;
}
</style>
